import React from 'react';
import {connect} from 'dva';
import {Link, browserHistory} from 'dva/router';
import {formatMobile} from '../../utils/commons';
import {Table, Row, Col, Form, Input, Select, Button, Switch, Modal, Popconfirm, message} from 'antd';

const FormItem = Form.Item;
const Option = Select.Option;
const R=require("ramda");
const exchangeRateDetail = Form.create()(class ExchangeRateDetail extends React.Component{
        constructor(props){
            super(props);
            this.state = {
                open: false,
                disabled: false
            }
        }

        handleOpen= () => {
            this.setState({ open: true });
        }
    
        handleCancel= () => {
            this.setState({ open: false });
            this.props.form.resetFields();
        }

        handleConfirm = () =>{
            this.props.form.validateFields((errors, values) => {
                if (errors) return; 
                    values.id = this.props.exchangeRate.dataSource && this.props.exchangeRate.dataSource.id ? this.props.exchangeRate.dataSource.id : null;
                    if(!R.equals(R.pick(Object.keys(values),this.props.exchangeRate.dataSource),values)){
                        this.props.dispatch({
                            type: R.isNil(values.id) ? 'exchangeRate/addCurrencyRate' : 'exchangeRate/updateCurrencyRate',
                                payload:{
                                    ...values,
                                    ratetime:values.ratetime.format(dateFormat),
                                    onSuccess:() =>{
                                        this.handleCancel();
                                        if(this.props.refreshList) this.props.refreshList();
                                    }
                                }
                            })
                        }else this.handleCancel();
                    });
        }

    render(){
        let dataSource = this.props.exchangeRate.dataSource ? this.props.exchangeRate.dataSource : {};
        let formItemLayout = { labelCol:{ span: 8}, wrapperCol:{ span:14}};
        const { getFieldDecorator } = this.props.form;

        return(
            <Modal maskClosable={false} closable={false} visible={this.state.open} width={850} title={"添加租户"} confirmLoading={this.props.loading} onCancel={ this.handleCancel.bind(this)} onOk={ this.handleConfirm.bind(this)}>
                <Form>
                    <FormItem
                        {...formItemLayout}
                        label="币种代码"
                        hasFeedback
                    >
                        {getFieldDecorator('code', {
                            rules: [{
                                required: true, message: '请输入币种代码',
                            }],
                            initialValue: xform.code
                        })(
                            <Input disabled={this.state.disabled} />
                        )}
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label="币种名称"
                        hasFeedback
                    >
                        {getFieldDecorator('name', {
                            rules: [{
                                required: true, message: '请输入币种名称',
                            }],
                            initialValue: xform.name
                        })(
                            <Input disabled={this.state.disabled} />
                        )}
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label="目标币种"
                        hasFeedback
                    >
                        {getFieldDecorator('targetcurrency', {
                            rules: [{
                                required: true, message: '请输入目标币种',
                            }],
                            initialValue: xform.targetcurrency
                        })(
                            <Select disabled={this.state.disabled} >
                                <Option value="CNY">CNY（人民币）</Option>
                                <Option value="USD">USD（美元）</Option>
                            </Select>
                        )}
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label="汇率"
                        hasFeedback
                    >
                        {getFieldDecorator('rate', {
                            rules: [{
                                required: true, message: '请输入汇率',
                            }],
                            initialValue: xform.rate
                        })(
                            <Input disabled={this.state.disabled} />
                        )}
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label="汇率时间"
                        hasFeedback
                    >
                        {getFieldDecorator('ratetime', {
                            rules: [{
                                required: true, message: '请输入汇率时间',
                            }],
                            initialValue : R.isNil(xform.ratetime)?'':moment(xform.ratetime,dateFormat)
                        })(
                            <DatePicker style={{width: '100%'}}
                                        showTime={{ format: 'YYYY-MM-DD' }}
                                        format="YYYY-MM-DD"
                                        placeholder="请选择时间"
                                        disabled={this.state.disabled}
                            />
                        )}
                    </FormItem>
                </Form>
            </Modal>
            )
        }
})

function mapStateToProps(state){
    return{
        loading: state.loading.models.exchangeRate, exchangeRate: state.exchangeRate
    };
}

export default connect(mapStateToProps)(exchangeRateDetail);